tags: ItIron2021 Javascript

前言

終於...我們終於可以稍微換個新主題了，過去的三天都聚焦在this身上，相信你也累了!
但我必須說，即便已經涵蓋了許多細節，我們對this的了解還是算相對淺的，完全掌握this要花費的成本極高，且在實務上多半不會有這樣的需求，面試也很少問到一些針對更底層的陷阱題，只是要應付jr等級題目的話，我們目前涵蓋的範圍應該是足夠了?

我們馬上開始今天的新主題吧，非常非常簡單的一道題目，2分鐘就可以搞定囉!

本日題目與解釋

請解釋什麼是箭頭函數

防雷圖，順帶一提我認為寵物當家這系列其實蠻好看的，很消遣!

這算是全系列裡相對簡單的問題了，其實這問題就是想問箭頭函數與一般函數的差別，不要傻傻的只解釋什麼箭頭函數長什麼樣唷! 一般來說有三個主要的不同點

• 差異一: 語法

一般的函數，不管你是要用expression或是declaration，大致上會是這樣寫

function add(a, b) {
  return a + b
}

// 或是

const add = function(a, b) {
  return a + b 
}

而箭頭函數則採用不同的寫法，上述的例子改寫為箭頭函數可以寫成

const add = (a, b) => {
  return a + b 
}

值得注意的有幾個重點

1. 若箭頭函數中只有一行return的程式碼，可以再做進一步的簡寫(省略{} & return)

舉個例子，下方的寫法與上述寫法等價

const add = (a, b) => a + b

2. 若剛好只有一個參數的情況，小括號也可以省略

const hello = name => `hello, ${name}`

• 差異二: this的指向

是的，又是this，但這是最後了我保證?

在一般函數中，this的指向為呼叫它的物件，但箭頭函數的指向都是固定的，永遠指向宣告時的物件而非使用它的物件。 卡斯柏在鐵人賽：箭頭函式 (Arrow functions)這篇文章就給了一個很棒的例子，我先簡化它的例子來做說明。

var name = '全域阿婆'
var auntie = {
  name: '漂亮阿姨',
  callName: () => { 
    console.log('4', this.name); // 4 全域阿婆
    setTimeout(() => {
      console.log('5', this.name); // 5 全域阿婆
      console.log('6', this); // 6 window 物件
    }, 10);
  }
}

auntie.callName()

由於該箭頭函數在宣告時，auntie物件還是在window物件下，因此此時this會指向全域的window 物件，且由於箭頭函數的指向在宣告時就決定了，後續無法用call、bind & apply改變該函數的指向。

• 差異三: 沒有arguments 參數

在箭頭函數的原型上並沒有arguments參數讓你使用，一般的函數你可以在函數中印出傳入的參數

function demo() {
  console.log(arguments)
}

demo(1,5,11,'Danny') // [1, 5, 11, 'Danny']

但同樣的語法在箭頭函數中就會出錯

const demo = () => {
  console.log(arguments)
}

demo(1,5,11,'Danny') // [1, 5, 11, 'Danny']

// Uncaught ReferenceError: arguments is not defined

本日核心觀念與總結

核心觀念

箭頭函數、this

總結

• 理解箭頭函數與一般函數的主要差別(最大的差異就是this)

本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!